{% extends "layout.html" %}


{% block body %}
<h3>自动分类V2：学习集的选择</h3>
<p>按下列类别进行训练，并在预测新对象的种类时可选地将它们映射到其他类别。&nbsp;<span data-toggle="tooltip" data-placement="right" data-html="true" title="
<p style='text-align: left'>基于您上一步选择的项目，本模型将使用该项目中包含的类别来进行训练。尽管有时对详细的，形态上均一的类别进行训练会使模型更好，但只有包含更广泛的类别才具更有生态学意义。在这种情况下，可以将分类为详细类别的所有对象重新组合为一种更广泛的分类。这可以通过将所有详细类别映射到右列中的广泛类别来完成。
</p>"
class="glyphicon glyphicon-question-sign"></span></p>

<script>
    function Applyfilter(){
        $('#TblTaxo input').prop( 'checked', false );
        var Limit=parseInt($('#selectlimit').val());
        var LimitType=$('#selecttype').val();
        $('#TblTaxo input').each(function(){
            if((LimitType=='N')&&($(this).data("nbr")>=Limit))
                $(this).prop( 'checked', true );
            if((LimitType=='P')&&($(this).data("pct")>=Limit))
                $(this).prop( 'checked', true );
        });
    }

</script>

<form method="post">
<input type="hidden" name="seltaxo" value="Y">
{{ ExtraHeader |safe }}
每个类别最多使用<input name="learninglimit" value="5000"> 个对象来训练模型。
<button type="submit" class="btn btn-primary">进入分类选项界面</button>
<p style="margin-top: 5px;">
  从项目中获得映射: <select id="TaxoMappingFromPrj" style="width: 400px;margin-top: 5px">
  <option value="{{ prj.projid }}" selected>{{ prj.title }}</option>
</select>
  <button type="button" class="btn btn-xs btn-primary" onclick="DoMapping()">映射</button>
  <button type="button" class="btn btn-xs btn-default" onclick="ClearMapping()">清除</button>

</p>
  <script>
  $('#TaxoMappingFromPrj').select2({
        ajax: {
            url: "/search/exploreproject",
            dataType: 'json',
            delay: 250,
            data: function (params) {  return { q: params.term   };  },
            processResults: function (data, page) { return { results: data};  },
            cache: true
        },
        dropdownCssClass:"width400"
    }); // Select2 Ajax
    function DoMapping() {
      $.getJSON("/search/gettaxomapping",{projid:$('#TaxoMappingFromPrj').val()},function (data) {
        $(".taxolb").html("").change();
        for(var s in data.mapping) {
          var liste=$("#taxolb"+s);
          for (var tel in data.taxo) {
            var newOption = new Option(data.taxo[tel], tel, false, false);
            liste.append(newOption)
          }
          liste.val(data.mapping[s]).change();
        }
      });
    }
    function ClearMapping() {
      $(".taxolb").val('').change();
    }
</script>
选择具有超过 <input type="text" id="selectlimit" value="20" size="2">
    <select id="selecttype">
        <option value="N">个对象</option>
        <option value="P">%对象</option>
    </select>
<input type="button" class="btn" value="选择" onclick="Applyfilter()"><br>
选择 <a href="#" onclick="$('#TblTaxo input').prop( 'checked', true )">全部</a>
    / <a href="#" onclick="$('#TblTaxo input').prop( 'checked', false );">全不选</a>
<table class="table table-bordered table-condensed" style="width: auto" id="TblTaxo">
    <tr><th colspan="2">(id) 选择</th><th width="200" style="text-align: center;">分类</th><th style="text-align: center;">Nbr</th>
      <th  style="text-align: center;">%</th><th  style="text-align: center;">映射为</th></tr>
    {%   for r in g.TaxoList %}
        <tr><td>({{ r[0] }})</td><td><input type="checkbox" value="Y" name="taxo{{ r[0] }}" data-nbr="{{ r[2] }}" data-pct="{{ r[3] }}" {{ r[4] }}></td>
          <td>{{ r[1] }} </td><td class="rightfixedfont">{{ r[2] }}</td><td class="rightfixedfont">{{ r[3] }} %</td>
          <td><div class="input-group">
       <select id="taxolb{{ r[0] }}" name="taxolb{{ r[0] }}" style="width: 210px" class='taxolb' > </select>
            <span class="input-group-btn">
                <button class="btn btn-default btn-sm" type="button"  data-toggle="modal" data-target="#TaxoModal" data-mytargetid="taxolb{{ r[0] }}">
                    <span id=OpenTaxoLB class="glyphicon glyphicon-th-list" aria-hidden="true"></button>
                </span>
    </div></td>
        </tr>
    {% endfor %}
</table>
</form>

<script>
$(function () {  $('[data-toggle="tooltip"]').tooltip()})

function SubmitProjectSelection() {
  var srclst=$(".selproj:checked").map(function(){return $(this).data('prjid');}).get().join(',');
  PostDynForm("?{{ url }}",{src:srclst});
}

$(document).ready(function() {
    $(".taxolb").select2({
        ajax: {
            url: "/search/taxo",
            dataType: 'json',
            delay: 250,
            data: function (params) {  return { q: params.term, page: params.page };  },
            processResults: function (data, page) { return { results: data};  },
            cache: true
        },
        minimumInputLength: 3
    }); // Select2 Ajax
    $('#TaxoModal').on('show.bs.modal', function (e) {
        var button = $(e.relatedTarget); // Button that triggered the modal
        var targetid = button.data('mytargetid');
         $("#TaxoModalBody").html("Loading...");
         $("#TaxoModalBody").load("/search/taxotree?target="+targetid);
    });
    }); // Ready
</script>


<!-- Modal -->
<div class="modal " id="TaxoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div id="TaxoModalBody">...</div>
      </div>
    </div>
  </div>
</div>

{% endblock %}